<!DOCTYPE html>
<html lang="en-us">

<head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no">
    <title>PlenOctree Viewer</title>
    <meta name="description" content="NeRF online demo; requires a dedicated GPU">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
    <link rel="stylesheet" href="css/main.css?v={{ver}}">
</head>

<body>
    <div id="loading">
        <div>
            <h3 id="load-text">Loading</h3>
            <div class="progress">
                <div class="progress-bar" role="progressbar" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" id="load-progress">0%</div>
            </div>
        </div>
    </div>
    <nav class="navbar navbar-expand-md navbar-light bg-light" id="header">
        <span class="navbar-brand">
            <a href="..#demo-section" class="back-link">
                <svg viewBox="0 0 24 24">
                    <path fill="currentColor" d="M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z" />
                </svg>
            </a>
            <span id="navbar-title">PlenOctree Viewer</span>
        </span>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-toggle" aria-controls="navbar-toggle" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <!-- <div class="collapse navbar-collapse" id="navbar-toggle"> -->
        <ul class="navbar-nav mr-auto">
            <li class="nav-item pl-1">
                <a href="#" class="nav-link dropdown-toggle" id="options-btn" title="Options and Visualization">
                    <svg style="width:24px;height:24px" viewBox="0 0 24 24">
                        <path fill="currentColor" d="M12,15.5A3.5,3.5 0 0,1 8.5,12A3.5,3.5 0 0,1 12,8.5A3.5,3.5 0 0,1 15.5,12A3.5,3.5 0 0,1 12,15.5M19.43,12.97C19.47,12.65 19.5,12.33 19.5,12C19.5,11.67 19.47,11.34 19.43,11L21.54,9.37C21.73,9.22 21.78,8.95 21.66,8.73L19.66,5.27C19.54,5.05 19.27,4.96 19.05,5.05L16.56,6.05C16.04,5.66 15.5,5.32 14.87,5.07L14.5,2.42C14.46,2.18 14.25,2 14,2H10C9.75,2 9.54,2.18 9.5,2.42L9.13,5.07C8.5,5.32 7.96,5.66 7.44,6.05L4.95,5.05C4.73,4.96 4.46,5.05 4.34,5.27L2.34,8.73C2.21,8.95 2.27,9.22 2.46,9.37L4.57,11C4.53,11.34 4.5,11.67 4.5,12C4.5,12.33 4.53,12.65 4.57,12.97L2.46,14.63C2.27,14.78 2.21,15.05 2.34,15.27L4.34,18.73C4.46,18.95 4.73,19.03 4.95,18.95L7.44,17.94C7.96,18.34 8.5,18.68 9.13,18.93L9.5,21.58C9.54,21.82 9.75,22 10,22H14C14.25,22 14.46,21.82 14.5,21.58L14.87,18.93C15.5,18.67 16.04,18.34 16.56,17.94L19.05,18.95C19.27,19.03 19.54,18.95 19.66,18.73L21.66,15.27C21.78,15.05 21.73,14.78 21.54,14.63L19.43,12.97Z" />
                    </svg>
                    Options
                </a>
            </li> <!-- nav-item  -->
            <li class="nav-item dropdown pl-1">
                <a class="nav-link dropdown-toggle" href="#" id="open-local-dropdown-toggle" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" title="Load a PlenOctree or drawlist or OBJ from a local file">
                    <svg style="width:24px;height:24px" viewBox="0 0 24 24">
                        <path fill="currentColor" d="M9,16V10H5L12,3L19,10H15V16H9M5,20V18H19V20H5Z" />
                    </svg>
                    Open Local
                </a>
                <div class="dropdown-menu" aria-labelledby="open-local-dropdown-toggle" id="open-local-file-dropdown">
                    <div class="btn-group" role="group">
                        <div class="custom-file">
                            <input type="file" class="custom-file-input" id="open-local-file" aria-describedby="fileHelp">
                            <label class="custom-file-label" for="open-local-file">
                                Select npz or obj...
                            </label>
                        </div>
                        <button type="button" id="open-local-btn" class="btn btn-primary">
                            Open
                        </button>
                    </div>
                    <div>
                        <span id="open-local-error"></span>
                    </div>
                </div> <!-- dropdown-menu -->
            </li> <!-- nav-item  -->
        </ul>
        <a href="#" class="nav-link dropdown-toggle" id="layers-btn" title="Show/hide mesh layers">
            <svg style="width:24px;height:24px" viewBox="0 0 24 24">
                <path fill="currentColor" d="M12,16L19.36,10.27L21,9L12,2L3,9L4.63,10.27M12,18.54L4.62,12.81L3,14.07L12,21.07L21,14.07L19.37,12.8L12,18.54Z" />
            </svg>
            Layers
        </a>
    </nav> <!-- navbar -->
    <div class="wrapper" id="main-wrapper">
        <nav id="options" class="custom-popup">
            <a class="btn custom-popup-close" id="options-close">
                <svg style="width:14px;height:14px" viewBox="0 0 24 24">
                    <path fill="currentColor" d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z" />
                </svg>
            </a>
            <div id="options-container" class="custom-popup-container">
                <h4>Options</h4>
                <div class="options-section">
                    <div class='input-group input-group-sm'>
                        <div class='input-group-prepend'>
                            render
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="qual-radio" id="qual-radio-0" value="0">
                            <label class="form-check-label" for="qual-radio-0">high speed</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="qual-radio" id="qual-radio-1" value="1" checked>
                            <label class="form-check-label" for="qual-radio-1">moderate</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="qual-radio" id="qual-radio-2" value="2">
                            <label class="form-check-label" for="qual-radio-2">high quality</label>
                        </div>
                    </div>
                    <div class='input-group input-group-sm'>
                        <div class='input-group-prepend'>
                            backlight
                        </div>
                        <input type="range" class="form-control custom-range slider" min="0" max="1" value="1" step="any" id="slider-bgbrightness">
                    </div>
                </div>
                <div class="options-section">
                    <h5>Slicing</h5>
                    <p class="options-description">
                        Only render volume within normalized bounding box.</p>
                    <div class='input-group input-group-sm'>
                        <div class='input-group-prepend'>
                            min
                        </div>
                        <div class="input-group-text">x</div>
                        <input type="range" class="form-control custom-range slider slider-min" min="0" max="1" value="0" step="any" id="slider-bbox-minx">
                        <div class="input-group-text">y</div>
                        <input type="range" class="form-control custom-range slider slider-min" min="0" max="1" value="0" step="any" id="slider-bbox-miny">
                        <div class="input-group-text">z</div>
                        <input type="range" class="form-control custom-range slider slider-min" min="0" max="1" value="0" step="any" id="slider-bbox-minz">
                    </div>
                    <div class='input-group input-group-sm'>
                        <div class='input-group-prepend'>
                            max
                        </div>
                        <div class="input-group-text">x</div>
                        <input type="range" class="form-control custom-range slider slider-max" min="0" max="1" value="1" step="any" id="slider-bbox-maxx">
                        <div class="input-group-text">y</div>
                        <input type="range" class="form-control custom-range slider slider-max" min="0" max="1" value="1" step="any" id="slider-bbox-maxy">
                        <div class="input-group-text">z</div>
                        <input type="range" class="form-control custom-range slider slider-max" min="0" max="1" value="1" step="any" id="slider-bbox-maxz">
                    </div>
                </div>
                <div class="options-section">
                    <h5>SH Decompose</h5>
                    <p class="options-description">
                        Only render given range of SH components:
                        <span id="decomp-min-disp">0</span> to <span id="decomp-max-disp">0</span>
                    </p>
                    <div class='input-group input-group-sm'>
                        <div class='input-group-prepend'>
                            min/max
                        </div>
                        <input type="range" class="form-control custom-range slider slider-decomp" min="0" max="9" value="0" step="1" id="slider-decomp-min">
                        <input type="range" class="form-control custom-range slider slider-decomp" min="0" max="9" value="9" step="1" id="slider-decomp-max">
                    </div>
                </div>
                <div class="options-section">
                    <h5>View Direction Shifting (&quot;Relighting&quot;)</h5>
                    <p class="options-description">
                        Pseudo-relighting by rotating viewdirs
                        <a id="vdir-reset-btn">
                            Reset
                        </a>
                    </p>
                    <div class='input-group input-group-sm'>
                        <div class='input-group-prepend'>
                            axis-angle
                        </div>
                        <input type="range" class="form-control custom-range slider slider-vdir" min="-0.785" max="0.785" value="0" step="any" id="slider-vdir-x">
                        <input type="range" class="form-control custom-range slider slider-vdir" min="-0.785" max="0.785" value="0" step="any" id="slider-vdir-y">
                        <input type="range" class="form-control custom-range slider slider-vdir" min="-0.785" max="0.785" value="0" step="any" id="slider-vdir-z">
                    </div>
                </div>
                <div class="options-section">
                    <h5>Octree Grid</h5>
                    <p class="options-description">
                    </p>
                    <div class='input-group input-group-sm' id='grid'>
                        <div class='input-group-prepend'>
                            show grid
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" value="" id="checkbox-showgrid">
                        </div>
                    </div>
                    <div class='input-group input-group-sm'>
                        <div class='input-group-prepend'>
                            reso&nbsp;
                            <span id="grid-reso-disp">4</span>
                        </div>
                        <input type="range" class="form-control custom-range slider" min="0" max="6" value="4" step="1" id="slider-grid-reso">
                    </div>
                </div>
                <div class="options-section">
                    <h5>Mesh</h5>
                    <p class="options-description">
                        <span class="pr-3">Adding meshes (prototype)</span>
                        <a id="mesh-add-cube-btn" class="btn pl-1">
                            Add Cube
                        </a>
                        <a id="mesh-add-sphere-btn" class="btn pl-1">
                            Add Sphere
                        </a>
                    </p>
                </div>
                <p id="fps-counter"><span id="fps-counter-val">0.00</span> FPS</p>
            </div>
        </nav>
        <nav id="layers" class="custom-popup">
            <a class="btn custom-popup-close" id="layers-close">
                <svg style="width:14px;height:14px" viewBox="0 0 24 24">
                    <path fill="currentColor" d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z" />
                </svg>
            </a>
            <div id="layers-container" class="custom-popup-container">
                <h5>Layers</h5>
                <div id="layers-items">
                </div>
            </div>
        </nav>

        <div id="content">
            <div class="emscripten_border">
                <canvas class="emscripten" id="canvas" oncontextmenu="event.preventDefault()"></canvas>
            </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <script type="text/javascript" src="js/main.js?v={{ver}}"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>

    <script type="text/template" id="layers-item-template">
        <div class="layers-item{classes}" layer="{id}">
            <span class="layers-item-color" layer-color="{border_color}"
                  style="background:{bg_color};border:2px solid {border_color}"></span>
            <span class="layers-item-name">{name}</span>
        </div>
    </script>

    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-21408087-2"></script>
    <script>
        window.dataLayer = window.dataLayer || [];

        function gtag() {
            dataLayer.push(arguments);
        }
        gtag('js', new Date());

        gtag('config', 'UA-21408087-2');
    </script>
</body>

</html>
